<template>



  <div id="flex_content" class="hello">
    <div id="id_content_header">
      <h2>header</h2>
    </div>

    <div id="id_content">
      <h1>{{ msg }}1</h1>
      <h1>{{ msg }}2</h1>
    </div>

    <div id="id_content_bottom">
      <h2>bottom</h2>
    </div>

  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Vue.js!'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


/**position relative | absolute
#flex_content{
   height: auto;
   display: flex;
   position: relative;
   flex-direction: column;
} */
#flex_content{
   min-height: 100%;
   display: flex;
   position: relative;
   flex-direction: column;
}
#id_content{
    height: auto;
    flex: 1 0 auto;
}

#id_content_bottom {
  color: red;
  width: 100%;
  font-weight: normal;
  flex: 0 0 1;
}

#id_content_header {
  color: red;
  width: 100%;
  flex: 0 0 auto;
  font-weight: normal;
}
</style>
